<template>
  <div id="app">
    <div v-show="pageShow">
      <el-config-provider :locale="locale">
          <blog-header :classifyList="classifyList" :linkList="linkList"></blog-header>
          <div id="main" ref="main" class="clear" :style="{minHeight:`${mainMinHeight}px`}">
            <blog-nav v-show="isPC" :classifyList="classifyList" :linkList="linkList"></blog-nav>
            <section id="blog-section">      
              <slot />
            </section>
            <blog-aside v-show="isPC" :tagList="tagList" :hotList="hotList"></blog-aside>
          </div>       
          <blog-tool v-show="isPC"></blog-tool>  
          <blog-footer></blog-footer>   
      </el-config-provider>  
    </div>
  </div>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const { classifyApi,linkApi,tagApi,articleApi } = useApi()
const locale = zhCn
const mainMinHeight = ref(0)
const isPC = ref(false)
const pageShow = ref(false)
const [{data:classifyList},{data:linkList},{data:tagList},{ data:{ list:hotList }}] = await Promise.all([
  classifyApi.getList(),
  linkApi.getList(),
  tagApi.getList(),
  articleApi.getList({page:1,limit:10,sort:'view'})
])
const getMainMinHeight = () => {
  let appHeight = document.getElementById('app')?.offsetHeight;
  if(appHeight){
    if(document.documentElement.clientWidth<1050) {
      mainMinHeight.value = appHeight - document.documentElement.clientWidth / 750 * 72 * 2
    }else{
      mainMinHeight.value = appHeight - 72
    }
  }
}
const setBodyFontSize = () => {
  document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 750) + 'px'
}
const judgingEquipment = () => {
  if(document.documentElement) {
    if(document.documentElement.clientWidth<1050) {
      isPC.value = false
      setBodyFontSize()
    }else{
      document.documentElement.removeAttribute('style')
      isPC.value = true
    }
    pageShow.value = true
  }else{
    document.addEventListener('DOMContentLoaded', judgingEquipment)
  }
}
const init = () => {
  getMainMinHeight()
  judgingEquipment()
}
onMounted(()=>{
  init()
  window.addEventListener('resize', init)
})
onUnmounted(()=>{
  window.removeEventListener('resize', init)
})
</script>

<style lang="less">
  #app{
      height:100%;
      overflow:auto;
      background:rgba(237,237,237,0.5);
  }
  @media screen and (min-width: 1049px) {
    #main {
      width:1050px;
      margin:0 auto;
      padding:75px 0 15px;
    }
    #blog-section{
      width:594px;
      margin:0 15px 0 175px;
      float:left;
    }
  }
  @media screen and (max-width: 1050px) {
    #main {
      width:100%;
      padding:1.5rem 0.3rem 0.3rem;
    }
  }
</style>